<template>
  <div class="performance">
    <div>
      <span class="performance-List"></span>签约业绩统计
    </div>
    <div class="Res-Date">
      <span>选择签约日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div>
      <!-- 机构 -->
      <ResidentOption @doctorTeam="getInfo"></ResidentOption>
    </div>
    <div class="chart-box">
      <div ref="barChart" :style="{ width: '1000px', height: '400px' }"></div>
    </div>
    <div>
      <div class="Res-btn">
        <el-button @click="ResDerive">导出</el-button>
      </div>
    </div>
    <div>
      <el-table show-summary="true" :data="datagender" stripe style="width: 100%;font-size: 12px;">
        <el-table-column prop="no" label="日期" align="center" />
        <el-table-column prop="count" label="目标签约量" align="center" />
        <el-table-column prop="name" label="实际签约量" align="center" />
        <el-table-column prop="ratio" label="签约完成率" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"
import DatePicker from "@/components/mmm/DatePicker.vue"
import ResidentOption from "@/components/mmm/ResidentOption.vue"
import api from "@/api"
import * as echarts from 'echarts';
import * as XLSX from "xlsx";
import { ElMessage } from 'element-plus'
let cjrhzd = ref()
let dhtd = ref()
let lrtd = ref()
let cxptd = ref()
let aaa = ref<Array<any>>([])
let bbb = ref<Array<any>>([])
//表格显示数据
let datagender = ref<Array<any>>([])
//本周签约业绩
const postThisWeekSign = async () => {
  const result = await api.Mdatastatistics.postThisWeekSignApi()
  console.log("签约", result.data.data);
  cjrhzd.value = result.data.data.残疾人互助队
  dhtd.value = result.data.data.段宏团队
  lrtd.value = result.data.data.老人团队
  cxptd.value = result.data.data.陈晓平团队

  //页面默认显示段宏
  blff(dhtd.value)
  initBarEcharts()
}
postThisWeekSign()

function blff(data: any) {
  aaa.value = []
  bbb.value = []
  data.forEach((item: any) => {
    aaa.value.push(...Object.keys(item) as any)
    bbb.value.push(...Object.values(item) as any)
  })
  for (let i = 0; i < aaa.value.length; i++) {
    datagender.value.push(
      { no: aaa.value[i], name: bbb.value[i], count: 10, ratio: bbb.value[i] / 10 * 100 + "%" },)
  }



  console.log("c", datagender.value);
}
const getInfo = (arg: any) => {
  if (arg === "残疾人互助队") {
    blff(cjrhzd.value)
    console.log("残疾人");
  } else if (arg === "段宏团队") {
    blff(dhtd.value)
    console.log("段宏");
  } else if (arg === "老人团队") {
    blff(lrtd.value)
    console.log("老人");
  } else if (arg === "陈晓平团队") {
    blff(cxptd.value)
    console.log("陈晓平");
  }
  initBarEcharts()
  console.log(aaa.value);
  console.log(bbb.value);
}



const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {
      text: '签约量',
      x: 'left',
      itemGap: '200%',
    },
    grid: {
      top: 90
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '10%',
      left: 'left',
      icon: 'circle'
    },
    xAxis: {
      type: 'category',
      data: aaa.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "实际签约量",
        data: bbb.value,
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: "#409EFF"
        },
      },
      {
        name: "目标签约量",
        data: [10, 10, 10, 10, 10, 10, 10],
        type: 'bar',
        barWidth: 15,
        barGap: '-100%',
        itemStyle: {
          color: 'rgba(102,142,220,0.2)'
        },
      }
    ],

  });
}

//表格导出
const ResDerive = () => {
  const data = XLSX.utils.json_to_sheet(datagender.value)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名

  ElMessage({
    message: "导出成功",
    type: 'success'
  })


}

</script>

<style lang='scss' scoped>
.performance {
  @include BoxStyle;

  .performance-List {
    @include dataList;
  }

  .Res-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }

  .chart-box {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px 20px 10px 20px;
    margin: 20px;
  }

  .Res-btn {
    text-align: right;
    margin: 20px;
  }
}
</style>